<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="../jqgrid.jsp"></jsp:include>
</head>
<script type="text/javascript">
var userId="";
	$(document).ready(function() {
		jQuery("#userlist").jqGrid({
			url : 'queryUser.action',
			autowidth : true,
			datatype : "json",
			colNames : [ 'id','姓名','登录名','密码', '固话', '手机', '邮编', '地址','生效' ],
			colModel : [ {
				name : 'id',
				index : 'id',
				width : 10,
				editable : false,
				hidden:true,
				searchoptions :{
					sopt:['eq','ne']
				}
			}, {
				name : 'name',
				index : 'name',
				width : 20,
				editable : true,
				editrules:{required:true},
				align : "center",
				searchoptions :{
					sopt:['cn','nc']
				}
			}, {
				name : 'loginName',
				index : 'loginName',
				width : 20,
				align : "center",
				editable : true,
				editrules:{required:true},
				searchoptions :{
					sopt:['cn','nc']
				}
			}, {
				name : 'pwd',
				index : 'pwd',
				width : 50,
				editable : true,
				hidden:true,
				editrules:{required:true},
				search:false
			}, {
				name : 'phone',
				index : 'phone',
				width : 20,
				align : "center",
				editable : true,
				editrules:{required:true},
				searchoptions :{
					sopt:['cn','nc']
				}
			}, {
				name : 'mobile',
				index : 'mobile',
				width : 20,
				align : "center",
				editable : true,
				editrules:{required:true,integer:true},
				searchoptions :{
					sopt:['cn','nc']
				}
			}, {
				name : 'zip',
				index : 'zip',
				width : 20,
				align : "center",
				editable : true,
				editrules:{required:true,integer:true},
				searchoptions :{
					sopt:['cn','nc']
				}
			}, {
				name : 'address',
				index : 'address',
				width : 80,
				align : "center",
				editable : true,
				editrules:{required:true},
				searchoptions :{
					sopt:['cn','nc']
				}
			}, {
				name : 'isuse',
				index : 'isuse',
				width : 10,
				editable : true,
				align : "center",
				edittype : "select",
				editoptions : {
					value : 'true:是;false:否'
				},
				formatter : function(cellvalue, options, row) {
					if (cellvalue == true) {
						return "是";
					} else {
						return "否";
					}
				}
			} ],
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			pager : '#usergridPager',
			sortname : 'id',
			viewrecords : true,
			jsonReader : {
				repeatitems : false
			},
			gridComplete:function(){
				userId="";
			},
			onSelectRow:function(rowid,status){
				var data = $("#userlist").getRowData(rowid);
				 jQuery("#userrolelist").setGridParam({
					 url:"queryRoles.action?userId="+data.id
					 }).trigger("reloadGrid"); 
				 userId=data.id;
			},
			sortorder : "desc",
			editurl : "editUser.action",
			caption : "用户列表"

		});
		jQuery("#userlist").jqGrid('navGrid', '#usergridPager', {
			edit : true,
			add : true,
			del : true
		}, {}, {}, {}
		,{multipleSearch:true}
		);
	});
		$(document).ready(function() {
			jQuery("#userrolelist").jqGrid({
				url : 'queryRoles.action',
				autowidth : true,
				datatype : "json",
				height:'auto',
				colNames : [ 'id','userId','选择', '名称', '是否启用', '描述'],
				colModel : [ {
					name : 'id',
					index : 'id',
					width : 1,
					hidden : true,
					key : true
				}, {
					name : 'userId',
					index : 'userId',
					width : 1,
					hidden:true
				}, {
					name : 'selectId',
					index : 'selectId',
					width : 20,
					align : 'center',
					formatter : function(v, x, r) {
						return '<input type="checkbox" value='+v+' id="checkbox'+v+'"  onclick="clickCheckbox(this)"/>';
					}
				}, {
					name : 'name',
					index : 'name',
					width : 30,
					align : 'center',
					editable : false
				}, {
					name : 'hasUse',
					index : 'hasUse',
					width : 20,
					align : "center",
					formatter : function(cellvalue, options, row) {
						if (cellvalue == true) {
							return "是";
						} else {
							return "否";
						}
					}
				}, {
					name : 'description',
					index : 'description',
					width : 100,
					align : 'center',
					editable : false
				}],
				rowNum : 1000,
				sortname : 'id',
				viewrecords : true,
				jsonReader : {
					repeatitems : false
				},
				sortorder : "desc",
				caption : "用户对应角色列表",
				gridComplete:function(){
					//var mydata = $("#userrolelist").jqGrid('getGridParam','data');
						var mydata = $('#userrolelist').getRowData();
						for(var i=0;i<mydata.length;i++){
							var checkbox="checkbox"+mydata[i].id;
							//alert(mydata[i].hasUse);
							if(userId!="" && mydata[i].hasUse=="是"){
								$("#"+checkbox+"").attr("disabled",null);	
							}else{
								$("#"+checkbox+"").attr("disabled","true");
							}
							 if(mydata[i].userId!=""){
								$("#"+checkbox+"").attr("checked","true");
							} 
						}
					}
			});
		});
		
		function clickCheckbox(obj){
			var mydata = $('#userrolelist').getRowData();
			var currentData;
			for(var i=0;i<mydata.length;i++){
				if(mydata[i].id==obj.value){
					currentData=mydata[i];
					break;
				}
			}
			if(userId==""){
				alert("请先选择用户。");
				return ;
			}
			var roleId=currentData.id;
			if(obj.checked){
				//保存用户对应的角色
				//alert("add currentData:"+currentData.name);
				$.ajax({
					   type: "POST",
					   dataType:"json",
					   url: "addUserRoleRelation.action?roleId="+roleId+"&userId="+userId+"",
					   success: function(data, textStatus){
						   jQuery("#userrolelist").setGridParam({
								 url:"queryRoles.action?userId="+userId
								 }).trigger("reloadGrid"); 
					   }
					});
			}else{//删除用户对应的角色
				$.ajax({
					   type: "POST",
					   dataType:"json",
					   url: "delUserRoleRelation.action?roleId="+roleId+"&userId="+userId+"",
					   success: function(data, textStatus){
						   jQuery("#userrolelist").setGridParam({
								 url:"queryRoles.action?userId="+userId
								 }).trigger("reloadGrid"); 
					   }
					});
			}
		}
</script>
<body>
	<div align="center">
		<table id="userlist"></table>
		<div id="usergridPager"></div>
		<!-- 用户对应的角色 -->
		<table id="userrolelist"></table>
	</div>
</body>
</html>